﻿<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="Export.Web.Ui.pages.login" %>

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Export System</title>
    <link rel="stylesheet" href="/css/style.default.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/themes/icon.css">
    <style>
        .btn-default {
            background: linear-gradient(to bottom, #3B6998 0%, #0B4073 100%) repeat scroll 0 0 transparent !important;
            color: #FFFFFF !important;
            text-shadow: 1px 1px rgba(0, 0, 0, 0.1) !important;
        }

        .auto-style1 {
            width: 65px;
        }

        .auto-style2 {
            width: 152px;
        }
    </style>
    <script type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/scripts/jquery.easyui.min.js"></script>
</head>

<body>
    <div class="loginwrapper">
        <div class="loginwrap zindex100 animate2 bounceInDown">
            <h1 class="logintitle"><span class="iconfa-lock"></span>Sign In <span class="subtitle">Login เพื่อเข้าใช้งานระบบ Export System </span></h1>
            <div class="loginwrapperinner">

                <form runat="server" id="loginform" method="post">
                    <p class="animate4 bounceIn">
                        <label for="username" style="color: #FFFFFF">รหัสพนักงาน</label>
                        <input runat="server" type="text" id="username" name="username" placeholder="รหัสพนักงาน" value="" />
                    </p>
                    <p class="animate5 bounceIn">
                        <label for="password" style="color: #FFFFFF">Password</label>
                        <input runat="server" type="password" id="password" name="password" placeholder="Password" />
                    </p>
                    <p class="animate6 bounceIn">

                        <input class="btn btn-default btn-block" type="submit" id="submitLogin" name="submit" value="Login" />
                    </p>
                    <p>
                        <asp:Label ID="logginError" runat="server" Text="รหัสพนักงาน หรือ Password ไม่ถูกต้อง" ForeColor="Red" Visible="False"></asp:Label>

                    </p>
                    <p class="animate7 fadeIn">
                        <a onclick="showForgotPW();" href="#"><span class="icon-question-sign icon-white"></span>ลืมรหัสผ่าน?</a>
                        <%--   <a style="float: right" href="/register.aspx"><span class="icon-question-sign icon-white"></span>ลงทะเบียน</a></p>--%>
                </form>

            </div>
            <!--loginwrapperinner-->
        </div>


        <div class="loginshadow animate3 fadeInUp"></div>
    </div>


    <div id="forgotPassword" class="easyui-dialog" style="width: 300px; height: 180px; padding: 10px 20px"
        closed="true" buttons="#dlgRole-buttons">
        <form id="FormRole" method="post" novalidate>
            <div class="fitem">
                <label style="width:100%">
                    UserName : </label>
                <input id="forgotUsername" name="forgotUsername">
            </div>
        </form>
    </div>
    <div id="dlgRole-buttons">
        <a href="#" class="easyui-linkbutton" iconcls="icon-ok" onclick="sendForgotPassword()">Send Password</a>
        <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:jQuery('#forgotPassword').dialog('close')">Cancel</a>
    </div>


    <script type="text/javascript">
        jQuery.noConflict();

        jQuery(document).ready(function () {

            var anievent = (jQuery.browser.webkit) ? 'webkitAnimationEnd' : 'animationend';
            jQuery('.loginwrap').bind(anievent, function () {
                jQuery(this).removeClass('animate2 bounceInDown');
            });

            jQuery('#username,#password').focus(function () {
                if (jQuery(this).hasClass('error')) jQuery(this).removeClass('error');
            });

            jQuery('#loginform button').click(function () {
                if (!jQuery.browser.msie) {
                    if (jQuery('#username').val() == '' || jQuery('#password').val() == '') {
                        if (jQuery('#username').val() == '') jQuery('#username').addClass('error'); else jQuery('#username').removeClass('error');
                        if (jQuery('#password').val() == '') jQuery('#password').addClass('error'); else jQuery('#password').removeClass('error');
                        jQuery('.loginwrap').addClass('animate0 wobble').bind(anievent, function () {
                            jQuery(this).removeClass('animate0 wobble');
                        });
                    } else {
                        jQuery('.loginwrapper').addClass('animate0 fadeOutUp').bind(anievent, function () {
                            jQuery('#loginform').submit();
                        });
                    }
                    return false;
                }
            });
        });

        function showForgotPW() {
            jQuery('#forgotPassword').dialog('open').dialog('setTitle', 'กรุณาระบุ User.');
        }

        function sendForgotPassword() {
            var UserName = jQuery('#forgotUsername').val();
            if (UserName != undefined && UserName != '') {
                jQuery.post('/service/api.ashx?metdhodName=sendforgotPassword', {
                    username: UserName
                }, function (result) {
                    alert(result);
                    jQuery('#forgotUsername').val('');
                    jQuery('#forgotPassword').dialog('close');
                }, 'text');
            }
        }
    </script>
</body>
</html>
